<template>
  <div class="shopManage">
    <div class="head">
      <div class="text">
        编号：
        <span>{{pageInfo.graCode}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        名称：
        <span>{{pageInfo.graName}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        状态：
        <span>{{pageInfo.deviceState?'正常':'异常'}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        所属门店：
        <span>{{pageInfo.orgName}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        关联摄像头：
        <span>{{pageInfo.deviceName}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        拍摄区域：
        <span>{{pageInfo.takeArea}}</span>
      </div>
    </div>
    <div class="imgBox">
      <div class="box">
        <div class="title">酒柜定妆照</div>
        <img :src="pageInfo.makeupFileUrl" />
      </div>
      <div class="box">
        <div class="title">抓拍照</div>
        <img :src="pageInfo.beforeFileUrl" />
      </div>
      <div class="box">
        <div class="title">整改后</div>
        <img :src="picUrl" @error="handleImgUrlError" />

        <transition name="el-fade-in">
          <div class="info">{{message}}</div>
        </transition>
        <div class="btn" v-if="pageInfo.warnState!=='2'">
          <el-button size="middle" @click="getNewImg" v-loading="loading">获取酒柜新照</el-button>
        </div>
      </div>
    </div>

    <div class="changeState">
      <span>
        <p style="height: 20px;line-height: 20px">处理意见:</p>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入处理意见"
          resize="none"
          v-model="pageInfo.dealInfo"
          disabled
        ></el-input>
      </span>
      <span>
        <p style="height: 20px;line-height: 20px">整改情况说明:</p>
        <el-input
          type="textarea"
          resize="none"
          v-model="pageInfo.decription"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入整改意见"
          size="mini"
        ></el-input>
        <span style="margin:5px 0 0 0 ;">
          发送短信告知
          <el-radio-group v-model="isSend">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </span>
      </span>
    </div>
    <div class="btnGroup">
      <el-button size="mini" type="warning" @click="$router.go(-1)">关闭</el-button>
      <el-button
        size="mini"
        type="primary"
        v-if="pageInfo.warnState!=='2'"
        @click="saveData"
        v-loading.fullscreen.lock="fullscreenLoading"
      >提交</el-button>
    </div>
  </div>
</template>

<script>
import {
  getWarningDataDetail,
  getNewPhotoByDesk,
  submitTaskDealInfo
} from "@/api/smartShops.js";
import $router from "../../../router";
export default {
  name: "shopManagerDetail",
  data() {
    return {
      loading: false,
      fullscreenLoading: false,
      isSend: 1,
      message: "",
      picUrl: "",
      pageInfo: {
        makeupFileUrl: "",
        before_file_url: "",
        isTrue: 1,
        isChange: 1,
        targetObject: "",
        copyToList: "",
        dealInfo: "",
        changerId: "",
        changerRoleName: "",
        changerName: "",
        ccRoleName: "",
        warnState: ""
      }
    };
  },
  methods: {
    async getNewImg() {
      this.loading = true;
      let  data  = await getNewPhotoByDesk({
        deviceUuid: this.pageInfo.deviceUuid
      });
      if (data) {
        this.loading = false;
      }
      this.picUrl = data.result;
      this.message = data.message;
    },
    async getData(query = {}) {
      let  data  = await getWarningDataDetail(query);
      this.pageInfo = { ...this.pageInfo, ...data.result };
      if (this.pageInfo.afterFileUrl) {
        this.picUrl = this.pageInfo.afterFileUrl;
      }
    },
    saveData() {
      this.fullscreenLoading = true;
      this.$confirm("是否确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let { data } = await submitTaskDealInfo({
            warnUuid: this.pageInfo.warnUuid,
            performUuid: this.pageInfo.performUuid,
            afterFileUrl: this.picUrl,
            decription: this.pageInfo.decription,
            isSend: this.pageInfo.isChange,
            sendCode: this.pageInfo.sendCode
          });
          this.$message({
            type: "success",
            message: "提交成功!",
            duration: 1500,
            onClose: () => {
              $router.go(-1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
        this.fullscreenLoading = false;
      
    },
    handleImgUrlError(e) {
      e.target.src = require("@/assets/images/img_icon/head.svg");
    }
  },
  created() {
    let query = this.$route.query;
    this.getData(query);
  }
};
</script>

<style scoped lang="scss">
.shopManage {
  width: 100%;
  height: 100%;

  .head {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;

    .el-divider {
      height: 60%;
    }

    .text {
      font-size: 15px;
      margin: 0 10px;

      span {
        color: red;
        letter-spacing: 1px;
        font-weight: 500;
      }
    }
  }

  .imgBox {
    width: 90%;
    height: 68%;
    margin: 10px 0 0;

    .box {
      width: 33%;
      height: 100%;
      box-sizing: border-box;
      float: left;
      text-align: center;

      .title {
        width: 60%;
        height: 20px;
        margin: 0 20%;
        text-align: left;
        font-size: 12px;
        color: red;
        font-weight: 500;
      }

      .info {
        width: 100%;
        text-align: center;
        height: 15px;
        font-size: 12px;
        color: red;
        line-height: 15px;
      }
      img {
        width: 60%;
        height: calc(100% - 75px);
      }

      .btn {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .changeState {
    width: 90%;
    font-size: 12px;
    p {
      height: 20px;
      line-height: 20px;
    }
    span {
      display: block;
      width: 60%;
      margin-left: 6%;
    }

    .postMsg {
      height: 30px;
      line-height: 30px;
    }
  }
  .btnGroup {
    width: 150px;
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 calc((100% - 150px) / 2);
  }
}
</style>
